<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonCss.js"></script>
		<title>计划书管理</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				计划书管理
				<el-button class="f-r" type="primary" icon="el-icon-plus" @click="addCont">添加计划书</el-button>
			</div>
			<div class="pd10">		
				<el-form :inline="true" :model="formInline" class="demo-form-inline">					
					<el-form-item>
						<el-input v-model="formInline.title" type="text" placeholder="产品名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-select v-model="formInline.category" placeholder="产品类别">
							<el-option :label="item.iitTitle" :value="item.iitId" v-for="item in categoryArr" :key="item.iitTitle"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select v-model="formInline.company" placeholder="保险公司">
							<el-option :label="item.icTitle" :value="item.icId" v-for="item in companyArr" :key="item.icTitle"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="tableData" stripe border style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="iia_title" label="产品名称"></el-table-column>
					<el-table-column prop="ic_title" label="保险公司"></el-table-column>
					<el-table-column prop="iit_title" label="产品类别">
						<!--<template slot-scope="scope">-->
							<!--{{({"1":"小白入门","2":"防坑指南","3":"重疾病专题","4":"医疗险专题"}[scope.row.category])}}							-->
						<!--</template>-->
					</el-table-column>
					<el-table-column prop="pic" label="缩略图">
						<template slot-scope="scope">
							<img :src="ImgbaseUrl+scope.row.iia_cover" min-width="92" height="92" />
						</template>
					</el-table-column>
					<el-table-column prop="data" label="资料"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
<!--							<el-button @click="handleEdit(scope.row)" type="text" size="medium">查看</el-button>-->
							<el-button @click="handleEdit(scope.row)" type="text" size="medium">编辑</el-button>
							<el-button @click="handleDelete(scope.row)" type="text" size="medium" class="color-F56C6C">删除</el-button>
							</template>
					</el-table-column>
				</el-table>				
				<!-- 分页 -->
				<div class="bottomstate">
					<el-button type="danger" @click="batchDelete">批量删除</el-button>
					<el-pagination class="f-r mt5" background @current-change="handleCurrentChange" :current-page="page" :page-size="limit" layout="total,prev, pager, next,jumper"
					 :total="total" ></el-pagination>
				</div>
			</div>
			<!-- 添加计划书 -->
			<el-dialog :visible.sync="dialogFormVisible" class="planForm">
				<div class="plan-cont">
					<p @click="goCont(1)">输入保费计算保额</p>
					<p @click="goCont(2)">输入保额计算保费</p>					
				</div>
			</el-dialog>
		</div>
	</body>
	<script src="/jeefast/elementui-lib/lib/vue.js"></script>
	<script src="/jeefast/elementui-lib/lib/index.js"></script>
	<script src="/jeefast/js/jquery-1.9.1.min.js"></script>
	<script src="/jeefast/js/axios.js"></script>
	<script src="/jeefast/js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					ImgbaseUrl: ImgbaseUrl,
					formInline:{
						name:"",
						company:"",
						category:""
					},
					companyArr:[],
					categoryArr:[],
					tableData: [],
					// 添加计划书
					dialogFormVisible: false,
					// 全选
					multipleSelection: [],
				}
			},
			methods: {
				search:function(){
					this.getTable();
					console.log(this.formInline)
				},
				// 添加
				addCont:function(){
					this.dialogFormVisible=true
				},
				// 批量删除
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				//删除
				handleDelete:function(row){
					let that = this
					that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						deletePlan({ids:row.iia_id}).then(res=>{
							if(res.data.code==0){
						that.$message({
							type: 'success',
							message: '删除成功!'
						});
						that.getTable();
					}
				})
				}).catch(() => {
						that.$message({
							type: 'info',
							message: '已取消删除'
						});
				});
				},
				// 批量删除
				batchDelete:function(row){
					let that = this
					let ids = []
					if (that.multipleSelection.length>0) {
						that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							for(let i=0;i<that.multipleSelection.length;i++){
								console.log(that.multipleSelection[i])
							ids.push(that.multipleSelection[i].iia_id)
						}
						deletePlan({ids:ids.join(',')}).then(res=>{
							if(res.data.code==0){
							that.$message({
								type: 'success',
								message: '删除成功!'
							});
							that.getTable();
						}
					})
					}).catch(() => {
							that.$message({
								type: 'info',
								message: '已取消删除'
							});
					});
					} else {
						that.$message({
							type: 'warning',
							message: '请选择需要删除的数据'
						});
					}
				},
				handleEdit:function(row){
					console.log(row)
					window.location.href = 'planContManage.html?id='+row.iia_id;//此处拼接内容
				},
				goCont:function(type){
					window.location.href = 'planContManage.html?type='+type;//此处拼接内容
				},
				getTable:function(){
					planList({
						page: this.page, //起始页面
						limit: this.limit, //每页显示个数
						title:this.formInline.title,//标题搜索
						type:this.formInline.category,//类别
						comp:this.formInline.company,//保险公司
					}).then(res=>{
						if(res.data.code==0){
						console.log(res.data.data)
						console.log(res);

						this.tableData=res.data.data;
						this.total=res.data.count;

					}
				})
				}
			},
			created() {
				insuranceTypeList({limit:10000}).then(res=>{
					console.log(res.data.data)
					this.categoryArr = res.data.data;
				});
				companyList({limit:10000}).then(res=>{
					console.log(res.data.data)
					this.companyArr = res.data.data;
				})
				this.getTable();
			},
		});
	</script>
</html>
